<template>
    <div>
        <!-- seach区域 -->
        <div class="seach">
            <span class="span-top">
                <span class="seachCSC">
                    {{$t('systemtyp')}}
                    <el-select v-model="noticeForm.appRole" :placeholder="$t('plsset')" size="mini">
                        <el-option :label="'-' + $t('plsset') + '-'" :value="null"></el-option>
                        <el-option :label="$t('personal')" value="PSN"></el-option>
                        <el-option :label="$t('merchant')" value="MER"></el-option>
                    </el-select>
                </span>
            </span>
            <span class="span-bottom">
                <span class="seachCSC">
                    {{$t('annsta')}}
                    <el-select v-model="noticeForm.status" :placeholder="$t('plsset')" size="mini">
                        <el-option :label="'-' + $t('plsset') + '-'" :value="null"></el-option>
                        <el-option :label="$t('waitfortherelease')" value="SYS_DRAFT"></el-option>
                        <el-option :label="$t('release')" value="SYS_RELEASE"></el-option>
                        <el-option :label="$t('dlte')" value="SYS_DELETE"></el-option>
                    </el-select>
                </span>
            </span>
            <div class="NOUS">
                <el-button type="primary" @click="seach" size="mini" v-preventReClick>{{$t('qury')}}</el-button>
                <el-button type="warning" @click="showAddPopUpon" size="mini" v-preventReClick>{{$t('add')}}</el-button>
            </div>
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" :data="noticeTab">
                <el-table-column type="index" :label="$t('sernum')">
                </el-table-column>
                <el-table-column prop="appRole" :label="$t('systemtyp')">
                </el-table-column>
                <el-table-column prop="contentValue.contentValue" :label="$t('anncont')">
                </el-table-column>
                <el-table-column prop="status" :label="$t('sta')">
                </el-table-column>
                <el-table-column :label="$t('opratn')" width="120" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" v-if="scope.row.status === $t('waitfortherelease')" @click="showEditUpon(scope.row)">{{$t('mdfy')}}</el-link>
                        <el-link type="primary" v-if="scope.row.status === $t('waitfortherelease')" @click="releaseNoticeRecord(scope.row.id)">{{$t('release')}}</el-link>
                        <el-link type="primary" @click="remove(scope.row)" v-if="scope.row.status !== $t('dlte')">{{$t('dlte')}}</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="noticeForm.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="noticeForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
        <!-- Add the box -->
        <el-dialog :title="$t('add')" :visible.sync="addDialogVisible" width="30%" @close="addDialogVisibleClosed(addNoticeRecordForm)" center :close-on-click-modal="isOk" :modal-append-to-body="false">
            <el-form :ref="addNoticeRecordForm" :rules="addNoticeRules" :model="addNoticeRecordForm" label-width="80px" :hide-required-asterisk="true">
                <el-form-item :label="$t('titl')" prop="recordName">
                    <el-input v-model="addNoticeRecordForm.recordName"></el-input>
                </el-form-item>
                <el-form-item :label="$t('systemtyp')" prop="appRole">
                    <el-select v-model="addNoticeRecordForm.appRole" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('personal')" value="PSN"></el-option>
                        <el-option :label="$t('merchant')" value="MER"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item :label="$t('sta')" prop="status">
                    <el-select v-model="addNoticeRecordForm.status" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('waitfortherelease')" value="draft"></el-option>
                        <el-option :label="$t('release')" value="release"></el-option>
                        <el-option :label="$t('dlte')" value="delete"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item :label="$t('content')" prop="noticeRecordContent.contentValue" :rules="{ required: true, message: this.$t('cantbeemt'), trigger: 'blur' }">
                    <el-input type="textarea" v-model="addNoticeRecordForm.noticeRecordContent.contentValue"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addNoticeRecord(addNoticeRecordForm)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="addDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
        <!-- modification the box -->
        <el-dialog :title="$t('mdfy')" :visible.sync="editDialogVisible" width="30%" @close="editDialogVisibleClosed(editNoticeRecordForm)" center :close-on-click-modal="isOk" :modal-append-to-body="false">
            <el-form :ref="editNoticeRecordForm" :rules="editNoticeRules" :model="editNoticeRecordForm" label-width="80px" :hide-required-asterisk="true">
                <el-form-item :label="$t('titl')" prop="recordName">
                    <el-input :disabled="canDel" v-model="editNoticeRecordForm.recordName"></el-input>
                </el-form-item>
                <el-form-item :label="$t('systemtyp')" prop="appRole">
                    <el-select :disabled="canDel" v-model="editNoticeRecordForm.appRole" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('personal')" value="PSN"></el-option>
                        <el-option :label="$t('merchant')" value="MER"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item :label="$t('sta')" prop="status">
                    <el-select v-model="editNoticeRecordForm.status" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('waitfortherelease')" value="SYS_DRAFT"></el-option>
                        <el-option :label="$t('release')" value="SYS_RELEASE"></el-option>
                        <el-option :label="$t('dlte')" value="SYS_DELETE"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item :label="$t('content')" prop="noticeRecordContent.contentValue" :rules="{ required: true, message: this.$t('cantbeemt'), trigger: 'blur' }">
                    <el-input type="textarea" :disabled="canDel" v-model="editNoticeRecordForm.noticeRecordContent.contentValue"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editNoticeRecord(editNoticeRecordForm)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="editDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
        <!-- release the box -->
        <el-dialog :title="$t('release')" :visible.sync="releaseDialogVisible" width="30%" @close="releaseDialogVisibleClosed(releaseNoticeRecordForm)" center :close-on-click-modal="isOk" :modal-append-to-body="false">
            <el-form :ref="releaseNoticeRecordForm" :model="releaseNoticeRecordForm" label-width="80px" :hide-required-asterisk="true">
                <el-form-item :label="$t('titl')" prop="recordName">
                    <el-input v-model="releaseNoticeRecordForm.recordName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item :label="$t('systemtyp')" prop="appRole">
                    <el-select v-model="releaseNoticeRecordForm.appRole" :placeholder="$t('plsset')" class="sellong" :disabled="true">
                        <el-option :label="$t('personal')" value="PSN"></el-option>
                        <el-option :label="$t('merchant')" value="MER"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('sta')" prop="status">
                    <el-select v-model="releaseNoticeRecordForm.status" :placeholder="$t('plsset')" class="sellong" :disabled="true">
                        <el-option :label="$t('waitfortherelease')" value="SYS_DRAFT"></el-option>
                        <el-option :label="$t('release')" value="SYS_RELEASE"></el-option>
                        <el-option :label="$t('dlte')" value="SYS_DELETE"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('content')" prop="noticeRecordContent.contentValue" :rules="{ required: true, message: this.$t('cantbeemt'), trigger: 'blur' }">
                    <el-input type="textarea" v-model="releaseNoticeRecordForm.noticeRecordContent.contentValue" :disabled="true"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="releaseNoticeRecord()" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="releaseDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getnoticerecordlist,
    addnoticerecord,
    editnoticerecord,
    releasenoticerecord
} from '@/libs/reqlist.js'
export default {
    data () {
        return {
            total: 0,
            isOk: false,
            noticeForm: {
                appRole: '',
                orderParamIdx: 0,
                orderType: 0,
                recordName: '',
                status: '',
                pageNum: 1,
                pageSize: 10
            },
            noticeTab: [],
            addDialogVisible: false,
            addNoticeRecordForm: {
                appRole: '',
                recordName: '',
                status: 'draft',
                noticeRecordContent: {
                    contentValue: ''
                }
            },
            addNoticeRules: {
                recordName: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                appRole: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                status: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ]
            },
            canDel: false,
            editDialogVisible: false,
            editNoticeRecordForm: {
                id: 0,
                appRole: '',
                recordName: '',
                status: '',
                noticeRecordContent: {
                    contentValue: ''
                }
            },
            editNoticeRules: {
                recordName: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                appRole: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                status: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ]
            },
            releaseDialogVisible: false,
            releaseNoticeRecordForm: {
                id: 0,
                appRole: '',
                recordName: '',
                status: '',
                noticeRecordContent: {
                    contentValue: ''
                }
            },
            releaseNoticeForm: {
                id: 0,
                userIds: []
            }
        }
    },
    methods: {
        getnoticeList() {
            getnoticerecordlist(JSON.stringify(this.noticeForm)).then(res => {
                if (res.data.code === '000000') {
                    this.total = res.data.data.total - 0
                    res.data.data.list.forEach(item => {
                        if (item.appRole === 'PSN') item.appRole = this.$t('personal')
                        if (item.appRole === 'MER') item.appRole = this.$t('merchant')
                        if (item.status === 'SYS_DRAFT') item.status = this.$t('waitfortherelease')
                        if (item.status === 'SYS_RELEASE') item.status = this.$t('release')
                        if (item.status === 'SYS_DELETE') item.status = this.$t('dlte')
                    })
                    this.noticeTab = res.data.data.list
                }
            })
        },
        seach() {
            this.noticeForm.pageNum = 1
            this.getnoticeList()
        },
        showAddPopUpon () {
            this.addDialogVisible = true
        },
        addNoticeRecord(form) {
            this.$refs[form].validate((valid) => {
                if (!valid) {
                    return false
                }
                this.addNoticeRecordForm.recordName = this.addNoticeRecordForm.recordName.trim()
                this.addNoticeRecordForm.noticeRecordContent.contentValue = this.addNoticeRecordForm.noticeRecordContent.contentValue.trim()
                addnoticerecord(JSON.stringify(this.addNoticeRecordForm)).then(res => {
                    if (res.data.code === '000000') {
                        this.$message({
                            message: this.$t('funaddsuc'),
                            type: 'success'
                        })
                        this.addDialogVisible = false
                        this.getnoticeList()
                    }
                })
            })
        },
        addDialogVisibleClosed(form) {
            this.$refs[form].resetFields()
        },
        showEditUpon(data) {
            if (data.status === this.$t('release')) this.canDel = true
            this.editNoticeRecordForm.id = data.id
            this.editNoticeRecordForm.appRole = data.appRole
            this.editNoticeRecordForm.recordName = data.recordName
            this.editNoticeRecordForm.status = data.status
            this.editNoticeRecordForm.noticeRecordContent.contentValue = data.contentValue.contentValue
            this.editDialogVisible = true
        },
        editNoticeRecord(form) {
            this.$refs[form].validate((valid) => {
                if (!valid) {
                    return false
                }
                if (this.editNoticeRecordForm.appRole === this.$t('personal')) this.editNoticeRecordForm.appRole = 'PSN'
                if (this.editNoticeRecordForm.appRole === this.$t('merchant')) this.editNoticeRecordForm.appRole = 'MER'
                if (this.editNoticeRecordForm.status === this.$t('waitfortherelease')) this.editNoticeRecordForm.status = 'SYS_DRAFT'
                if (this.editNoticeRecordForm.status === this.$t('release')) this.editNoticeRecordForm.status = 'SYS_RELEASE'
                if (this.editNoticeRecordForm.status === this.$t('dlte')) this.editNoticeRecordForm.status = 'SYS_DELETE'
                this.editNoticeRecordForm.recordName = this.editNoticeRecordForm.recordName.trim()
                this.editNoticeRecordForm.noticeRecordContent.contentValue = this.editNoticeRecordForm.noticeRecordContent.contentValue.trim()
                editnoticerecord(JSON.stringify(this.editNoticeRecordForm)).then(res => {
                    if (res.data.code === '000000') {
                        this.$message({
                            message: this.$t('modfunsuc'),
                            type: 'success'
                        })
                        this.editDialogVisible = false
                        this.getnoticeList()
                    }
                })
            })
        },
        editDialogVisibleClosed(form) {
            this.canDel = false
            this.$refs[form].resetFields()
        },
        showRelease (data) {
            this.releaseNoticeRecordForm.id = data.id
            this.releaseNoticeRecordForm.recordName = data.recordName
            this.releaseNoticeRecordForm.appRole = data.appRole
            this.releaseNoticeRecordForm.status = data.status
            this.releaseNoticeRecordForm.noticeRecordContent.contentValue = data.contentValue.contentValue
            this.releaseDialogVisible = true
        },
        releaseNoticeRecord (id) {
            this.releaseNoticeForm.id = id
            this.$confirm(this.$t('whetherissued'), this.$t('release'), {
            cancelButtonText: this.$t('cnl'),
            confirmButtonText: this.$t('cfm')
            }).then(async () => {
                await releasenoticerecord(JSON.stringify(this.releaseNoticeForm)).then(res => {
                    if (res.data.code === '000000') {
                        this.$message({
                            message: this.$t('releasesuccess'),
                            type: 'success'
                        })
                        this.getnoticeList()
                    }
                })
            })
        },
        releaseDialogVisibleClosed(form) {
            this.$refs[form].resetFields()
        },
        remove (data) {
            this.editNoticeRecordForm.id = data.id
            this.editNoticeRecordForm.appRole = data.appRole
            this.editNoticeRecordForm.recordName = data.recordName
            this.editNoticeRecordForm.status = 'SYS_DELETE'
            this.editNoticeRecordForm.noticeRecordContent.contentValue = data.contentValue.contentValue
            this.$confirm(this.$t('dlte'), this.$t('dlte'), {
                cancelButtonText: this.$t('cnl'),
                confirmButtonText: this.$t('cfm')
            }).then(async () => {
                await editnoticerecord(JSON.stringify(this.editNoticeRecordForm)).then(res => {
                    if (res.data.code === '000000') {
                        this.getnoticeList()
                        this.$message({
                            message: this.$t('dltfunsuc'),
                            type: 'success'
                        })
                    }
                })
            })
        },
        handleSizeChange (newSize) {
            this.noticeForm.pageSize = newSize
            this.getnoticeList()
        },
        // 监听总页数变化
        handleCurrentChange (newNum) {
            this.noticeForm.pageNum = newNum
            this.getnoticeList()
        }
    },
    mounted () {
        this.getnoticeList()
    }
}
</script>

<style lang="less" scoped>
@import './annMgr.less';
</style>
